<template>
  <view class="sale">
    <u-navbar title="限时抢购"></u-navbar>
    <view class="header-wraper">
      <image mode="widthFix" src="/static/seckill_bg.png"></image>
    </view>
    <view class="content">
      <scroll-view scroll-x>
        <view class="index-navs">
          <view class="index-nav-v">
            <view
              class="index-nav"
              :class="{ 'index-nav-active': nav == index }"
              @click="clickNavigateTime(index)"
              v-for="(item, index) in timeLine"
              :key="index"
            >
              {{ item.timeLine }}:00
              <view
                class="index-nav-desc"
                :class="{
                  desc: index != 0 || item.distanceStartTime != 0,
                }"
                >{{
                  index === 0 && item.distanceStartTime === 0
                    ? "抢购中"
                    : "即将开始"
                }}
              </view>
            </view>
          </view>
        </view>
      </scroll-view>
      <view class="sale-items" v-if="goodsList.length > 0">
        <goodsTemplate :res="goodsList" :nav="nav" />
      </view>
      <view v-else>
        <view class="nodata">
          <u-empty
            mode="coupon"
            text="暂无商品"
            src="/static/img/coupon-empty.png"
            style="margin-top: 190rpx"
          ></u-empty>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { getSeckillTimeLine, getSeckillTimeGoods } from "@/api/promotions.js";
import Foundation from "@/utils/Foundation.js";
import goodsTemplate from "@/components/m-goods-list/promotion.vue";
export default {
  components: {
    goodsTemplate,
  },
  data() {
    return {
      nav: 0, //默认选择第一个时间
      timeLine: "", //获取几个点活动
      resTime: 0, //当前时间
      time: 0, //距离下一个活动的时间值
      times: {}, //时间集合
      onlyOne: "", //是否最后一个商品
      goodsList: [], //商品集合
      params: {
        pageNumber: 1,
        pageSize: 10,
      },
    };
  },

  /**
   * 显示时间活动
   */
  async onShow() {
    await this.getTimeLine();
    if (!this.timeLine) {
      await uni.showToast({
        icon: "none",
        duration: 2000,
        title: "今天没有活动，明天再来吧",
      });
    }
    this._setTimeInterval = setInterval(() => {
      if (this.time <= 0) {
        clearInterval(this._setTimeInterval);
        this.getGoodsList();
        this.getTimeLine();
      } else {
        this.times = Foundation.countTimeDown(this.time);
        this.time--;
      }
    }, 1000);
  },

  onUnload() {
    this._setTimeInterval && clearInterval(this._setTimeInterval);
  },
  methods: {
    /**
     * 获取时间线商品
     */
    async getTimeLine() {
      let res = await getSeckillTimeLine();
      if (res.data.success && res.data.result.length > 0) {
        //   let result = [
        //     {
        //       timeLine: 0,
        //       startTime: 0,
        //       distanceStartTime: 0,
        //       seckillGoodsList: [
        //         {
        //           seckillId: "",
        //           timeLine: 0,
        //           goodsId: "",
        //           point: 0,
        //           skuId: "",
        //           goodsName: "",
        //           goodsImage: "",
        //           storeId: "",
        //           price: 0.0,
        //           quantity: 0,
        //           salesNum: 0,
        //           originalPrice: 0.0,
        //         },
        //       ],
        //     },
        //     {
        //       timeLine: 0,
        //       startTime: 0,
        //       distanceStartTime: 0,
        //       seckillGoodsList: [
        //         {
        //           seckillId: "",
        //           timeLine: 0,
        //           goodsId: "",
        //           point: 0,
        //           skuId: "",
        //           goodsName: "",
        //           goodsImage: "",
        //           storeId: "",
        //           price: 0.0,
        //           quantity: 0,
        //           salesNum: 0,
        //           originalPrice: 0.0,
        //         },
        //       ],
        //     },
        //     {
        //       timeLine: 0,
        //       startTime: 0,
        //       distanceStartTime: 0,
        //       seckillGoodsList: [
        //         {
        //           seckillId: "",
        //           timeLine: 0,
        //           goodsId: "",
        //           point: 0,
        //           skuId: "",
        //           goodsName: "",
        //           goodsImage: "",
        //           storeId: "",
        //           price: 0.0,
        //           quantity: 0,
        //           salesNum: 0,
        //           originalPrice: 0.0,
        //         },
        //       ],
        //     },
        //   ];
        let timeLine = res.data.result.sort(
          (x, y) => Number(x.timeLine) - Number(y.timeLine)
        );
        this.timeLine = timeLine.slice(0, 5);
        this.resTime = parseInt(new Date().getTime() / 1000);
        this.onlyOne = res.data.result.length === 1;
        this.diffTime = parseInt(new Date().getTime() / 1000) - this.resTime;

        this.time =
          this.timeLine[this.nav].distanceStartTime ||
          (this.timeLine[this.nav + 1] &&
            this.timeLine[this.nav + 1].distanceStartTime) ||
          Foundation.theNextDayTime() - this.diffTime;
        this.times = Foundation.countTimeDown(this.time);

        this.getGoodsList();
      }
    },

    /**
     * 获取商品集合
     */
    async getGoodsList() {
      this.params.timeLine = this.timeLine[this.nav].timeLine;
      let res = await getSeckillTimeGoods(this.params.timeLine);
      if (res.data.success && res.data.result.length != 0) {
        this.goodsList = res.data.result;
      } else {
        this.goodsList = [];
      }
    },

    /**
     * 单击导航时间
     */
    clickNavigateTime(type) {
      this.nav = type;
      this.goodsList = [];
      this.diffTime = parseInt(new Date().getTime() / 1000) - this.resTime;
      this.time =
        this.timeLine[this.nav].distanceStartTime ||
        (this.timeLine[this.nav + 1] &&
          this.timeLine[this.nav + 1].distanceStartTime) ||
        Foundation.theNextDayTime() - this.diffTime;

      this.times = Foundation.countTimeDown(this.time);
      this.getGoodsList();
    },
  },
};
</script>

<style lang="scss" scoped>
.content {
  margin-top: -70rpx;
  background: #fafafa;
  border-radius: 24rpx 24rpx 0rpx 0rpx;
  padding: 32rpx 16rpx;
  position: fixed;
  left: 0rpx;
  top: 503rpx;
  width: 100%;
}
.sale {
  width: 100%;
  min-height: 100vh;
  background-color: #fafafa;
}

.nodata {
  flex-direction: column;
  display: flex;
  width: 100%;
  justify-content: center;
  align-items: center;
  margin-top: 40rpx;

  > div {
    font-size: 24rpx;
    margin-top: 20rpx;
    color: #666;
  }
}

.header-wraper {
  height: 420rpx;
  > image {
    height: 420rpx;
    width: 100vw;
    display: inline-block;
  }
}

.sale-items {
  padding-top: 20rpx;
}

.index-navs {
  background: #fafafa;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.index-nav-v {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

.index-nav {
  font-size: 28rpx;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  justify-content: center;
  align-items: center;
  min-width: 132rpx;
  flex-direction: column;
  color: #757575;
  height: 94rpx;
  line-height: 42rpx;
  position: relative;
  font-size: 40rpx;
  font-weight: bold;

  &-active {
    color: #212121;
    position: relative;
    z-index: 30;
    .index-nav-desc {
      color: #fff;
      font-weight: bold;
      background: #ff3000;
      padding: 0 25rpx;
      border-radius: 21px;
    }
    .desc {
      color: #fff;
      font-weight: bold;
      background: #00bf74;
      padding: 0 25rpx;
      border-radius: 21px;
    }
  }
}

.index-nav-desc,
.desc {
  margin-top: 4rpx;
  font-size: 22rpx;
  color: #bababa;
  height: 42rpx;
  box-sizing: border-box;
}
</style>
